import Vue from 'vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import MainPage from '../views/MainPage.vue'
import Home from '../views/main-page/Home.vue'
import NotFound from '../views/error-page/NotFound.vue'
import Table from '../views/main-page/Table.vue'
import Record from '../views/main-page/Record.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'MainPage',
    component: MainPage,
    redirect: 'HBaseTable', // 默认页面
    children: [
      {
        path: 'Home',
        name: 'Home',
        meta: {
          title: '首页',
          keepAlive: false
        },
        component: Home
      },
      {
        path: 'HBaseTable',
        name: 'Table',
        meta: {
          title: '表',
          keepAlive: true
        },
        component: Table
      },
      {
        path: 'HBaseTableData',
        name: 'Record',
        meta: {
          title: '数据',
          keepAlive: false
        },
        component: Record
      }
    ]
  },
  {
    path: '/404',
    name: 'NotFound',
    meta: {
      title: '找不到页面',
      keepAlive: false
    },
    component: NotFound
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404'
  }
]

const router = new VueRouter({
  mode: 'hash', // 使用hash模式
  routes
})

NProgress.configure({
  showSpinner: false
})

//在路由跳转前用NProgress.start()标记下进度条开始
router.beforeEach((to, _, next) => {
  let title = ''
  if (to && to.meta && to.meta.title) {
    title = to.meta.title
  }
  NProgress.start()
  document.title = title
  next()
})

//在路由跳转后用NProgress.done()标记下结束
router.afterEach(() => {
  NProgress.done()
})

export default router
